<template>
  <div id="anaysis-box" v-loading="loading" element-loading-text="拼命解析中">
    <h3>{{ title }}</h3>
    <el-alert
      title="支持抖音、快手、小红书、微博、西瓜视频、哔哩哔哩等视频平台去水印下载。"
      type="info"
      show-icon
    >
    </el-alert>
    <div style="margin-top: 15px">
      <el-input
        placeholder="请输入视频图集链接"
        v-model="videoUrl"
        @keydown.enter.native="getUrl"
        class="input-with-select"
        clearable
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getUrl"
        ></el-button>
      </el-input>
    </div>
    <el-result :subTitle="resList.time" v-if="resList !== null">
      <!-- 自定义标题 -->
      <template slot="title">
        <div v-html="resultTitle"></div>
      </template>
      <!-- 自定义图标 -->
      <template slot="icon">
        <el-image
          :src="resList.cover"
          v-if="resList.images.length == 0"
          referrerPolicy="no-referrer"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <!-- 走马灯 -->
        <el-carousel indicator-position="outside" arrow="always" v-else>
          <el-carousel-item v-for="item in resList.images" :key="item">
            <el-image :src="item" referrerPolicy="no-referrer"></el-image>
          </el-carousel-item>
        </el-carousel>
      </template>
      <template slot="extra">
        <el-button type="primary" size="medium" @click="downFile('cover')"
          >下载封面</el-button
        >
        <el-button
          v-if="resList.images.length == 0"
          type="primary"
          size="medium"
          @click="downFile('url')"
          >下载视频</el-button
        >
        <el-button v-else type="primary" size="medium" @click="downFile('img')"
          >下载图集</el-button
        >
      </template>
    </el-result>
  </div>
</template>

<script>
import { Message } from "element-ui";
import axios from "axios";
export default {
  data() {
    return {
      title: "短视频图集去水印",
      videoUrl: "", // 视频链接 https://v.douyin.com/UjWap6q
      // baseUrl: "https://tenapi.cn/v2/video", // 请求地址
      baseUrl: "https://api.ciyer.com/api/dsp/", // 请求地址
      loading: false,
      resList: null,
      resultTitle: "",
    };
  },
  methods: {
    getUrl() {
      // if (!this.videoUrl) {
      //   navigator.clipboard
      //     .readText()
      //     .then((text) => {
      //       alert("剪贴板中的文本内容：", text);
      //       this.videoUrl = text;
      //     })
      //     .catch((err) => {
      //       alert("读取剪贴板内容时出错：", err);
      //     });
      //   return;
      // }
      var start, end, requestUrl;
      requestUrl = this.videoUrl;
      // 获取小红书、哔哩哔哩和抖音等链接
      if (requestUrl.indexOf("douyin") !== -1) {
        start = requestUrl.indexOf("http");
        end = requestUrl.lastIndexOf("/");
        requestUrl = requestUrl.slice(start, end);
      } else if (requestUrl.indexOf("xhslink") !== -1) {
        start = requestUrl.indexOf("http");
        // end = this.videoUrl.lastIndexOf("，复制本条信息");
        requestUrl = requestUrl.substring(start, start + 25);
      } else if (requestUrl.indexOf("b23.tv") !== -1) {
        start = requestUrl.indexOf("http");
        requestUrl = requestUrl.substring(start, start + 22);
      }
      this.loading = true;
      axios
        .get(this.baseUrl, {
          params: {
            uid: "1684377760",
            my: "bdijprvzMOPSTUVYZ2",
            url: requestUrl,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.loading = false;
            Message.success("解析成功");
            this.resList = res.data.data;
            console.log(this.resList);
            if (this.resList.title.length > 65) {
              this.resultTitle = this.resList.title.slice(0, 65) + "...";
            } else {
              this.resultTitle = this.resList.title.slice(0, 65);
            }
          } else {
            this.loading = false;
            Message.error(res.data.msg);
          }
        })
        .catch((error) => {
          this.loading = false;
          Message.error(error);
          console.log(error);
        });
    },
    downFile(type) {
      if (type == "url") {
        window.open(this.resList.url, "_blank");
      } else if (type == "cover") {
        // 将单个字符串转为数组
        var imgArr = [];
        imgArr.push(this.resList.cover);
        this.downloadImages(imgArr);
        // window.open(this.resList.cover, "_blank");
      } else if (type == "img") {
        this.downloadImages(this.resList.images);
      }
    },
    // 下载图集
    downloadImages(imageUrls) {
      for (let i = 0; i < imageUrls.length; i++) {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", imageUrls[i], true);
        xhr.responseType = "blob";
        xhr.onload = () => {
          if (xhr.status === 200) {
            const url = window.URL.createObjectURL(xhr.response);
            const a = document.createElement("a");
            a.href = url;
            var title = this.resultTitle.slice(0, 6) || "img";
            a.download = `${title}_${i}.jpg`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          }
        };
        xhr.send();
      }
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.el-select .el-input {
  width: 80px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  /* width: 480px; */
  margin-top: 25px;
}

.el-icon-picture-outline {
  font-size: 50px;
}

/* 适配移动端 */
@media screen and (max-width: 900px) {
  #anaysis-box {
    width: 100%;
  }
  ::v-deep .el-carousel__indicator {
    padding: 0px 5px;
  }

  ::v-deep .el-carousel__indicator .el-carousel__button {
    width: 4px;
    height: 4px;
    border-radius: 50%;
  }

  ::v-deep .el-result__icon .el-carousel__container {
    min-height: 200px;
  }
}

// 适配PC
@media screen and (min-width: 900px) {
  #anaysis-box {
    width: 900px;
  }
  ::v-deep .el-result__icon .el-carousel__container {
    min-height: 450px;
  }
}

.el-result {
  padding: 30px 0px;
}

::v-deep .el-result__icon {
  width: 100%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>